<template>
    <div class="full-container">
      <div class="search-container">
        <div class="left-container">
          <div class="subtitle">
            选择国家&地区
          </div>
            <el-tree
              :data="countries"
              show-checkbox
              :default-expand-all="true">
            </el-tree>
        </div>
        <div class="right-container">
          <div class="search-settings">
            <div class="seach-setting-factor">
              <div class="setting-line">
                <!-- <b-select class="input-item" placeholder="关键词选择分类" expanded>
                  <option value="1">分类一</option>
                  <option value="2">分类二</option>
                  <option value="3">分类三</option>
                </b-select>  -->
                <b-input class="input-item" placeholder="请填写关键词" v-model="keyword">
                </b-input>
                <!-- <b-select class="input-item" placeholder="请选择搜索引擎" v-model="searchEngine" expanded>
                  <option value="google">google</option>
                  <option value="yahoo">yahoo</option>
                  <option value="other">other</option>
                </b-select>  -->
                <b-taginput
                  v-model="filterWords"
                  class="input-item"
                  placeholder="添加过滤词"
                  >
                </b-taginput>
                <b-taginput
                  v-model="includeWords"
                  placeholder="添加包含词">
                </b-taginput>
              </div>
              <div class="setting-line">
                  <b-select
                    class="input-item"
                    placeholder="线程数量默认为10"
                    expanded>
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                  </b-select>
                  <b-select
                    class="input-item"
                    placeholder="搜索广度默认为60"
                    expanded>
                    <option value="60" selected>60</option>
                    <option value="50">50</option>
                    <option value="40">40</option>
                  </b-select>
                  <b-select
                    class="input-item"
                    placeholder="搜索深度默认为1"
                    expanded>
                    <option value="3" selected>3</option>
                    <option value="2">2</option>
                    <option value="1">1</option>
                  </b-select>
              </div>
              <div class="setting-line">
                <b-checkbox>数据精确</b-checkbox>
                <b-checkbox>采集到邮箱后自动发送</b-checkbox>
                <b-checkbox>过滤已发</b-checkbox>
              </div>
            </div>
            <div class="setting-buttons">
              <div class="setting-button"><a :class="['button','is-info']" :disabled="isSearching" @click="startSearchEngine">开始搜索</a></div>
              <div class="setting-button"><a :class="['button','is-info']" :disabled="!isSearching" @click="stopSearchEngine">停止搜索</a></div>
              <div class="setting-button"><a class="button is-info" @click="saveToCustomerCardActive = true">批量保存客户</a></div>
              <label v-show="isSearching">搜索中...请耐心等待</label>
              <!-- <a class="button is-info is-normal">暂停</a> -->
            </div>
          </div>
          <div class="customer-list">
            <div v-if="data.length > 0">
              <b-table
                :data="data"
                :striped="true"
                :hoverable="true"
                :focusable="true"
                :paginated="true"
                :per-page="10"
                checkable>
                <template slot-scope="props">
                  <b-table-column field="域名" label="域名">
                    {{ props.row.domain }}
                  </b-table-column>

                  <b-table-column field="email" label="email">
                    {{ props.row.email }}
                  </b-table-column>

                  <b-table-column field="phone" label="电话">
                    {{ props.row.phone }}
                  </b-table-column>

                  <b-table-column label="网站标题">
                    {{ props.row.websiteTitle }}
                  </b-table-column>
                  <b-table-column label="网站简介">
                    {{ props.row.description }}
                  </b-table-column>
                  <b-table-column label="Facebook">
                    {{ props.row.facebook }}
                  </b-table-column>
                  <b-table-column label="LinkedIN">
                    {{ props.row.linkedin }}
                  </b-table-column>
                </template>
              </b-table>
            </div>
            <div v-else >
              <b-table
                :data="emptyTableData"
                :striped="true"
                :hoverable="true"
                :focusable="true">
                <template slot-scope="props">
                  <b-table-column field="域名" label="域名">
                    {{ props.row.domain }}
                  </b-table-column>

                  <b-table-column field="email" label="email">
                    {{ props.row.email }}
                  </b-table-column>

                  <b-table-column field="phone" label="电话">
                    {{ props.row.phone }}
                  </b-table-column>

                  <b-table-column label="网站标题">
                    {{ props.row.websiteTitle }}
                  </b-table-column>
                  <b-table-column label="网站简介">
                    {{ props.row.description }}
                  </b-table-column>
                  <b-table-column label="Facebook">
                    {{ props.row.facebook }}
                  </b-table-column>
                  <b-table-column label="LinkedIN">
                    {{ props.row.linkedin }}
                  </b-table-column>
                </template>
              </b-table>
              <div class="empty-hint">当前暂无数据</div>
            </div>
          </div>
        </div>
      </div>
      <!-- modal保存为客户 -->
      <b-modal :active.sync="saveToCustomerCardActive" :width="640" scroll="keep">
        <div class="card">
            <div class="card-content">
              <b-field label="选择客户分类">
                  <b-select v-model="selectedCustomerType" expanded>
                    <option v-for="(item,index) in customerTypeList" :key="index" :value="item.id">{{item.name}}</option>
                  </b-select>
              </b-field>
              <b-input v-if="isCreatingNewCustomerType" placeholder="请输入新分类名" v-model="newCustomerType.name"></b-input>
              <b-input style="margin-top:10px;" v-if="isCreatingNewCustomerType" v-model="newCustomerType.description" placeholder="请输入新分类描述"></b-input>
              <a style="margin-top:10px;" class="button is-normal is-small" @click="createNewCustomerType">{{isCreatingNewCustomerType ? '保存' : '新增客户分类'}}</a>
              <div class="card-button">
                <a class="button is-info" @click="changeToCustomer">保存客户</a>
              </div>
            </div>
        </div>
    </b-modal>
    <!-- loading -->
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
    </div>
</template>

<script>
import {startMailTask} from "@/api/mailTask.js"
import {startSearch, stopSearch, getSearchResult} from "@/api/search.js"
import { getUserId } from "@/util/userInfoStorage"
import {getCustomerTypeByUserId, createCustomerType} from "@/api/customerType"
import {batchCreate} from "@/api/customer"
export default {
    name: "search",
    data(){
      return {
        countries: [
          {
            label: "所有国家",
            children: [
              {
                label: "美洲",
                children: [
                  {
                    label: "美国"
                  },
                  {
                    label: "墨西哥"
                  },
                  {
                    label: "阿根廷"
                  }
                ]
              },
              {
                label: "亚洲",
                children: [
                  {
                    label: "中国",
                  },
                  {
                    label: "日本"
                  },
                  {
                    label: "韩国"
                  }
                ]
              }
            ]
          }
        ],
        filterWords:[],
        includeWords:[],
        data: [],
        emptyTableData: [{
          domain: '',
          email: '',
          phone: '',
          websiteTitle: '',
          description: '',
          facebook: '',
          linkedin: ''
        }],
        customerDataIsEmpty: true,
        keyword: "",
        searchEngine: "google",
        currentTaskId: 0,
        offset: 0,
        limit: 20,
        isSearching: false,
        saveToCustomerCardActive: false,
        customerTypeList: [],
        selectedCustomerType: 0,
        isCreatingNewCustomerType: false,
        newCustomerType: {
          name: '',
          description: ''
        },
        isFullPage: true,
        isLoading: false,
        continueGetSearchData: false,
        // searchResultIntervel,
      }
    },
    methods: {
      //新增客户分类
      createNewCustomerType(){
        if(this.isCreatingNewCustomerType){
          if(this.newCustomerType.name && this.newCustomerType.description){
            this.isLoading = true;
            createCustomerType(this.userId,this.newCustomerType).then((res) => {
                this.$toast.open({
                    message: '创建新分类成功',
                    type: 'is-success'
                })
                this.getCustomerTypeList();
                this.isLoading = false;
                this.isCreatingNewCustomerType = false;
            }).catch(e => {
                this.isLoading = false;
                this.$toast.open({
                    message: e.message || '服务器未知错误',
                    type: 'is-danger',
                })
            })
          }else{
            this.$toast.open({
              message: '请输入完整信息',
              type: 'is-danger'
            })
          }
        }else{
          this.isCreatingNewCustomerType = true;
        }
      },
      //批量保存为客户
      changeToCustomer(){
        if(!(this.data && this.data.length > 0)){
          this.$toast.open({
            message: '无可保存用户',
            type: 'is-warning'
          })
          return;
        }
        if(!this.selectedCustomerType){
          this.$toast.open({
            message: '请选择客户分类',
            type: 'is-warning'
          })
          return;
        }
        this.isLoading = true;
        batchCreate(this.userId,this.selectedCustomerType,this.data).then((res) => {
          this.$toast.open({
            message: '保存成功',
            type: 'is-success'
          })
          this.isLoading = false;
        }).catch(e => {
          this.isLoading = false;
          this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger'
          })
        })
      },
      //获取全部客户类型
      getCustomerTypeList(){
        getCustomerTypeByUserId(this.userId).then((res) => {
          this.customerTypeList = res.data;
        }).catch((e) => {
          console.log(e.message);
        })
      },
      //开始搜索
      startSearchEngine(){
        this.isLoading = true;
        if(!this.keyword){
          this.$toast.open({
            message: '请填写搜索关键字',
            type: 'is-danger'
          })
          return;
        }else if(!this.searchEngine){
          this.$toast.open({
            message: '请选择搜索引擎',
            type: 'is-danger'
          })
          return;
        }
        startSearch(this.userId,this.keyword,this.searchEngine).then(res => {
          this.$toast.open({
            message: '开始搜索',
            type: 'is-success'
          })
          this.isSearching = true;
          this.currentTaskId = res.data;
          this.getSearchResultByIntervel();
          this.isLoading = false;
        }).catch(e => {
          this.isLoading = false;
          this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger'
          })
        })
      },
      //停止搜索
      stopSearchEngine(){
        this.isLoading = true;
        this.continueGetSearchData = false;
        stopSearch(this.userId,this.currentTaskId).then((res) => {
          this.$toast.open({
            message: '搜索已停止',
            type: 'is-warning'
          })
          this.isSearching = false;
          this.isLoading = false;
        }).catch(e => {
          this.isLoading = false;
          this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger',
          })
        })
      },
      //获取搜索数据
      fetchSearchResult(){
        //开始获取搜索数据
        getSearchResult(this.userId,this.currentTaskId,this.offset,this.limit).then((res) => {
          let prevData = this.data;
          let newDataList = prevData.concat(res.data);
          this.offset = newDataList.length;
          this.data = newDataList;
        }).catch(e => {
          this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger'
          })
        })
      },
      //获取搜索结果
      getSearchResultByIntervel() {
        this.continueGetSearchData = true;
        var searchResultIntervel = setInterval(() => {
          if(!this.continueGetSearchData){
            clearInterval(searchResultIntervel);
          }
          this.fetchSearchResult();
        },8000)
      },
    },
    mounted() {
        let userId = getUserId();
        this.userId = userId;
        //获取全部客户类型
        this.getCustomerTypeList();
    },
}
</script>

<style lang="less" scoped>
.card-button {
  margin-top: 30px;
}
.empty-hint {
  width: 100%;
  text-align: center;
}
.setting-buttons {
  // display: flex;
  // align-items: center;
  // margin-top: 20px;
  .setting-button{
    margin-bottom: 10px;
  }
  a {
    margin-right: 10px;
  }
}
.setting-line {
  display: flex;
  margin-top: 10px;
  .input-item {
    margin-right: 10px;
  }
}
.search-container {
  height: 100%;
  display: flex;
  .left-container {
    flex: 1;
    // height: 100%;
    margin-top: 20px;
    margin-left: 10px;
    padding: 20px 20px;
    background-color: #ffffff;
    .subtitle {
      font-weight: bold;
      padding-bottom: 10px;
      border-bottom: 1px solid #cec4c4;
    }
  }
  .right-container {
    flex: 8;
    padding: 20px 10px;
    .search-settings {
      border-radius: 5px;
      padding: 20px 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 24px 0 rgba(0,0,0,0.04);
      display: flex;
      justify-content: space-between;
    }
    .customer-list {
      min-height: 70vh;
      margin-top: 10px;
      border-radius: 5px;
      padding: 30px 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 24px 0 rgba(0,0,0,0.04);
      .buttons {
        margin-top:20px;
        display: flex;
        flex-direction: row-reverse;
      }
    }
  }
}
</style>
